<template>
    <div class="app-cont">
        <div class="app-zuo">
            <div class="zou-top">
              <div class="border">
                <div class="border-title">
                    <span>车牌号</span>
                    <div class="block">
                        <el-input  style=" margin-top: 10px; width: 350px;" placeholder="请输入内容"></el-input>
                    </div>
                </div>
              </div>
              <div class="border">
                  <div class="border-title">
                  <span>快捷时间</span>
                  <div class="block">
                    <el-date-picker clearable
                      v-model="gjxqParams.time"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择时间">
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div class="border">
                  <div class="border-title">
                  <span>开始时间</span>
                  <div class="block">
                    <el-date-picker clearable
                      v-model="tcxqParams.startTime"
                      style=" margin-top: 10px;"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择开始时间">
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div class="border">
                  <div class="border-title">
                  <span>结束时间</span>
                  <div class="block">
                    <el-date-picker clearable
                    v-model="tcxqParams.endTime"
                    style=" margin-top: 10px;"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择结束时间">
                  </el-date-picker>
                  </div>
                </div>
              </div>
              <!-- <div class="border">
                  <div class="border-title2">
                  <span>开始时间-结束时间</span>
                  <div class="block">
                    <el-time-picker
                        style=" margin-top: 10px;"
                      is-range
                      v-model="value1"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      placeholder="选择时间范围">
                    </el-time-picker>
                  </div>
                </div>
              </div> -->
              <div class="border">
                  <div class="border-title">
                  <span>最低速度</span>
                  <div class="block">
                    <div class="block">
                        <el-input style=" margin-top: 10px;width: 350px;"  v-model="gjxqParams.space" placeholder="请输入内容"></el-input>
                  </div>
                  </div>
                </div>
              </div>
              <div class="border">
                  <div class="border-title">
                  <span>停车时长</span>
                  <div class="block">
                    <el-input style=" margin-top: 10px;width: 350px;" v-model="gjxqParams.parkingDuration" placeholder="请输入内容"></el-input>
                  </div>
                </div>
              </div>
              <el-button type="primary" style="margin-left: 40%;margin-top: 10px;">查询</el-button>       
            </div> 
        </div>
        <div class="app-you">
            <div class="you-top"></div> 
            <div class="you-botton">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="轨迹详情" name="gjxqList">
                      <el-table v-loading="loading" :data="gjxqList">
                        <el-table-column type="selection" width="55" align="center" />
                        <el-table-column label="id" align="center" prop="id" />
                        <el-table-column label="时间" align="center" prop="time" width="180">
                          <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.time, '{y}-{m}-{d}') }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="速度" align="center" prop="space" />
                        <el-table-column label="停车时长" align="center" prop="parkingDuration" />
                        <el-table-column label="位置" align="center" prop="position" />
                        <el-table-column label="状态" align="center" prop="status" />
                        <el-table-column label="脉冲速度" align="center" prop="pulseVelocity" />
                        <el-table-column label="经纬度" align="center" prop="lonLat" />
                      </el-table>

                      <pagination
                        v-show="gjxqtotal>0"
                        :total="gjxqtotal"
                        :page.sync="gjxqParams.pageNum"
                        :limit.sync="gjxqParams.pageSize"
                        @pagination="getList"
                      />
                    </el-tab-pane>
                    <el-tab-pane label="停车详情" name="tcxqList">
                      <el-table v-loading="loading" :data="tcxqList">
                        <el-table-column type="selection" width="55" align="center" />
                        <el-table-column label="id" align="center" prop="id" />
                        <el-table-column label="开始时间" align="center" prop="startTime" width="180">
                          <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="结束时间" align="center" prop="endTime" width="180">
                          <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="停车时长" align="center" prop="parkingDuration" />
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                          <template slot-scope="scope">
                            <el-button
                              size="mini"
                              type="text"
                              icon="el-icon-edit"
                              @click="handleUpdate(scope.row)"
                              v-hasPermi="['system:tcxq:edit']"
                            >修改</el-button>
                            <el-button
                              size="mini"
                              type="text"
                              icon="el-icon-delete"
                              @click="handleDelete(scope.row)"
                              v-hasPermi="['system:tcxq:remove']"
                            >删除</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                      
                      <pagination
                        v-show="tcxqtotal>0"
                        :total="tcxqtotal"
                        :page.sync="tcxqParams.pageNum"
                        :limit.sync="tcxqParams.pageSize"
                        @pagination="getList"
                      />
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
  </template>
 
 <script>
 import { listGjxq, getGjxq, delGjxq, addGjxq, updateGjxq } from "@/api/gjhf/gjxq";
 import { listTcxq, getTcxq, delTcxq, addTcxq, updateTcxq } from "@/api/gjhf/tcxq";

  export default {
    data() {
      return {
        gjxqList: [],
        gjxqtotal: 0,
        gjxqParams: {
          pageNum: 1,
          pageSize: 10,
          time: null,
          space: null,
          parkingDuration: null
        },

        tcxqList: [],
        tcxqtotal: 0,
        tcxqParams: {
          pageNum: 1,
          pageSize: 10,
          startTime: null,
          endTime: null
        },
        radio2:2,
        radio: 3,
        radio3:1,
        radio4:1,
        tabPositions:"",
        tabPosition: 'left',
        activeName: 'tcxqList',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    created() {
    this.getList();
  },
    methods: {
      getList() {
      this.loading = true;
      listGjxq(this.gjxqParams).then(response => {
        this.gjxqList = response.rows;
        this.gjxqtotal = response.total;
        this.loading = false;
      });
      listTcxq(this.tcxqParams).then(response => {
        this.tcxqList = response.rows;
        this.tcxqtotal = response.total;
        this.loading = false;
      });
    },
      handleNodeClick(data) {
        console.log(data);
      },

      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

  <style>
  .app-cont{
    width: 100%;
    height: 800px;
  }
    .app-zuo{
        width: 40%;
        height: 100%;
        float: left;
        border-right: 2px #e0dbdb solid;
    }

    .zou-top{
        height: 40%;
    }
    .border {
      width: 280x;
      height: 65px;
      margin-top: 30px;
      margin-left: 20px;
      border: 2px solid black;
      border-radius: 4px;
    }
    .border-title {
      width: 110px;
      height: 30px;
      background: white;
      text-align: center;
      margin-top: -12px;
      margin-left: 10px;
    }

    .border-title2 {
      width: 150px;
      height: 30px;
      background: white;
      text-align: center;
      margin-top: -12px;
      margin-left: 10px;
    }

    .tdxz{
      display: flex;
      flex-wrap: row nowrap;
      margin-top: 20px;
    }
    .app-you{
        width: 60%;
        height: 100%;
        float: left;
    }
    .you-top{
        height: 58%;
        width: 100%;
        background-image: url('~@/assets/images/htivdo.png');
        background-size:100% 100%;
    }
    .you-botton{
        height: 40%;
    }
  </style>